// // 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// // 这就是插件
// // vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// // vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

// import XtxSkeleton from './xtx-skeleton.vue'
// import XtxCarousel from './xtx-carousel.vue'
// import XtxMore from './xtx-more.vue'

// export default {
//   install(app) {
//     // 在app上进行扩展，app提供 component directive 函数
//     // 如果要挂载原型 app.config.globalProperties 方式
//     app.component(XtxSkeleton.name, XtxSkeleton)
//     app.component(XtxCarousel.name, XtxCarousel)
//     app.component(XtxMore.name, XtxMore)
//   }
// }

// 自动的批量注册组件

// import XtxSkeleton from './xtx-skeleton'
// import XtxCarousel from './xtx-carousel'
// import XtxMore from './xtx-more'

import { h, render } from 'vue'
import XtxMessage from './xtx-message'
export default {
  install(app) {
    // 增加全局方法 因为vue3不怎么使用this，所以实用性不大
    app.config.globalProperties.$message = Message
    // 全局注册组件
    // app.component(XtxSkeleton.name, XtxSkeleton)
    // app.component(XtxCarousel.name, XtxCarousel)
    // app.component(XtxMore.name, XtxMore)

    // 1. 加载components下所有的vue文件
    const ctx = require.context('./', false, /\.vue$/)
    // console.log(ctx)
    ctx.keys().forEach(item => {
      // item: 组件的地址  ctx(item) 导入这个组件
      const component = ctx(item).default
      app.component(component.name, component)
    })

    // 创建观察对象实例
    // const observer = new IntersectionObserver(callback[, options])
    // callback 被观察dom进入可视区离开可视区都会触发
    // - 两个回调参数 entries , observer
    // - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
    // - observer 就是观察实例
    // options 配置参数
    // - 三个配置属性 root rootMargin threshold
    // - root 基于的滚动容器，默认是document
    // - rootMargin 容器有没有外边距
    // - threshold 交叉的比例

    // 实例提供两个方法
    // observe(dom) 观察哪个dom
    // unobserve(dom) 停止观察那个dom

    // 定义指令
    // <img :src="item.src" alt="" />
    // <img v-lazy="item.src" alt="" />
    app.directive('lazy', {
      mounted(el, { value }) {
        // 图片的懒加载逻辑
        // 参数1：回调函数
        // 参数2：可选的配置
        const observer = new IntersectionObserver(
          ([{ isIntersecting }], observer) => {
            if (isIntersecting) {
              // 停止监听
              observer.unobserve(el)
              // 给el元素设置src属性
              el.src = value
              // 如果图片加载失败，显示默认的图片
              el.onerror = function() {
                el.src = require('@/assets/images/200.png')
              }
            }
          },
          {
            threshold: 0
          }
        )
        observer.observe(el)
      }
    })
  }
}

// 动态的给body创建一个盒子
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
let timer = null
export function Message({ type, text, duration = 2000 }) {
  // 渲染XtxMessage组件
  // <XtxMessage :type="type" :text="text"></XtxMessage>
  const vNode = h(XtxMessage, { type, text }) // h 创建元素
  // 渲染vNode到div上
  render(vNode, div)

  // 开启延时器
  clearTimeout(timer)
  timer = setTimeout(() => {
    // 删除虚拟DOM
    render(null, div)
  }, duration)
}
